<template>
  <div class="crumbs">
    <router-link to="/" class="home">首页</router-link>
    <Icon class="mar-6" name="icon-youjiantou" color="#999"/>
    <ul>
      <li v-for="(item, index) in info" :key="index">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="less" scoped>
@import "../styles/variable.less";

.crumbs {
  padding: 20px 0px;
  .home {
    color: @font-color;
    text-decoration: none;
  }
  .mar-6 {
    margin: 0px 6px;
  }
  ul {
    color: @font-color-grey;
    display: inline;
    li {
      display: inline;
    }
  }
}
</style>
